<template>
    <div>
        <el-container>
            <el-header class="inside-header">
                <div>
                    <!-- 面包屑 -->
                    <el-breadcrumb separator=">">
                        <el-breadcrumb-item>数据应用</el-breadcrumb-item>
                        <el-breadcrumb-item class="breadcrumbColor">车辆进出统计</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </el-header>
            <el-main>
                <div class="inside-main-box">
                    <el-row class="inside-main" >
                        <el-col :span="4" style="margin-left: 15px;">
                            <el-form-item label="出入时间" size="small">
                                <el-date-picker clearable v-model="form.staStarTime" type="date" placeholder="选择时间" style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <span>-</span>
                        <el-col :span="3">
                            <el-form-item label="" size="small">
                                <el-date-picker clearable v-model="form.staEndTime" type="date" placeholder="选择时间" style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="4" style="margin-left: 3px;">
                          <el-form-item label="出入类型" size="small">
                            <el-select clearable v-model="form.typeOfAcces" placeholder="请选择">
                              <el-option label="入厂" value="入厂" />
                              <el-option label="出厂" value="出厂" />
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="4" style="margin-left: 3px;">
                            <el-form-item label="统计类型" size="small">
                                <el-select clearable v-model="form.condition" placeholder="请选择统计类型">
                                    <el-option label="年" value="1" />
                                    <el-option label="月" value="2" />
                                    <el-option label="日" value="3" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                      <el-col v-if="factoryId == 0" :span="4" style="margin-left: 5px">
                        <el-form-item label="所属工厂" size="small">
                          <el-select v-model="form.factory_id" placeholder="请选择工厂" clearable>
                            <el-option v-for="fa in factory.factorys" :label="fa.factory_name" :key="fa.id" :value="fa.id" />
                          </el-select>
                        </el-form-item>
                      </el-col>
                        <el-col :span="6" style="margin:0 15px 10px">
                            <el-button size="small" class="sele-but" icon="search" @click="selectQuery">查询</el-button>
                            <el-button size="small" class="empty-but" icon="refresh" @click="onReset">重置</el-button>
                            <el-button size="small" class="empty-but" icon="download" @click="exportExcel">导出</el-button>
                        </el-col>
                    </el-row>
                </div>
              <div style="height: 20px; display: flex; align-items: center;background:#f2f4f5;margin:0 -19.5px 0 -20px">
              </div>
  <div style="margin-top:15px">
    <el-table :data="tableData" style="width: 100%;" height="460">
        <el-table-column align="center" prop="staTime" label="日期" width="180"/>
      <el-table-column align="center" prop="factory_id" label="工厂" width="90px" show-overflow-tooltip>
        <template #default="item">
          <span v-if="item.row.factory_id">{{factory.factoryNames[item.row.factory_id]?.factory_name}}</span>
        </template>
      </el-table-column>
        <el-table-column align="center" prop="typeOfAcces" label="出入类型" width="100" />
        <el-table-column align="center" label="国0">
            <el-table-column align="center" prop="staguo0" label="数量" width="80" />
            <el-table-column align="center" prop="staBiguo0" label="占比" width="80">
            </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="国Ⅰ">
            <el-table-column align="center" prop="staguo1" label="数量" width="80" />
            <el-table-column align="center" prop="staBiguo1" label="占比" width="80">
            </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="国Ⅱ">
            <el-table-column align="center" prop="staguo2" label="数量" width="80" />
            <el-table-column align="center" prop="staBiguo2" label="占比" width="80">
            </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="国Ⅲ">
            <el-table-column align="center" prop="staguo3" label="数量" width="80" />
            <el-table-column align="center" prop="staBiguo3" label="占比" width="80">
            </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="国Ⅳ">
            <el-table-column align="center" prop="staguo4" label="数量" width="80" />
            <el-table-column align="center" prop="staBiguo4" label="占比" width="80">
            </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="国Ⅴ">
            <el-table-column align="center" prop="staguo5" label="数量" width="80" />
            <el-table-column align="center" prop="staBiguo5" label="占比" width="80">
            </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="国Ⅵ">
            <el-table-column align="center" prop="staguo6" label="数量" width="80" />
            <el-table-column align="center" prop="staBiguo6" label="占比" width="80">
            </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="新能源">
            <el-table-column align="center" prop="staXin" label="数量" width="80" />
            <el-table-column align="center" prop="staBiXin" label="占比" width="80">
            </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="合计">
              <el-table-column align="center"  label="数量" width="80" >
              <template #default="scope">
                  <span v-if="scope.row.typeOfAcces=='入厂'">{{scope.row.staAll}}</span>
                  <span v-else-if="scope.row.typeOfAcces=='出厂'">{{scope.row.staAll}}</span>
                    <span v-else-if="scope.row.typeOfAcces==''|| scope.row.typeOfAcces == undefined">{{scope.row.staAll}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="占比" width="80" >
              <template #default="scope">
                  <span v-if="scope.row.typeOfAcces=='出厂'">{{scope.row.staBiAll}}</span>
                  <span v-if="scope.row.typeOfAcces=='入厂'">{{scope.row.staBiAll}}</span>
                <span v-else-if="scope.row.typeOfAcces==''|| scope.row.typeOfAcces == undefined">{{scope.row.staBiAll}}</span>
              </template>
            </el-table-column>
        </el-table-column>
    </el-table>
<!--    <el-pagination style="margin-right:40px; display: flex; justify-content: flex-end"  v-model:current-page="queryInfo.pagenum" v-model:page-size="queryInfo.pagesize"-->
<!--                   size="small" layout="prev, pager, next, jumper,total"-->
<!--                   :total="queryInfo.total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>-->
</div>
</el-main>
</el-container>
</div>
</template>

<script setup>
    import { onMounted, reactive, ref} from 'vue'
    import { Plus, UploadFilled } from "@element-plus/icons-vue";
    import {   selectExecutionLog   } from "@/api/mobilePollution"
    // 路由
    import { useRouter } from 'vue-router'
    // 文件导入
    import { ElMessage, ElMessageBox } from 'element-plus'
    import {getFactoryInfo} from "../../../api/factory";
    import * as XLSX from "xlsx";
    import moment from "moment";
    import {statisticsListOut} from "@/api/leadingOut";
    let table = reactive({
        rows: [],
        total: 0
    });
    onMounted(() => {
      selectQuery()
      getFactorys()
        // getTbaleData(null);
    });
    const access = ref({})
    //当前日期减一天
    // const x = () => {
    //   var time = (new Date).getTime()-24*60*60*1000;
    //   var yesday = new Date(time) //获取的是前一天日期
    //   access.value = yesday.getFullYear()+"-"+(yesday.getMonth()>9 ? (yesday.getMonth()+1):"0"+(yesday.getMonth()+1))+"-"+(yesday.getDate()>9?(yesday.getDate()):"0"+(yesday.getDate()))
    // }
    // const getTbaleData = (namel) => {
    //     getUsers({
    //             displayName: name,
    //             pageNo: 1,
    //             pageSize: 10,
    //         })
    //         .then((res) => {
    //             // table.rows = res.data.records;
    //             // table.total = res.data.total
    //         });
    // };
    const router = useRouter()
    const form = reactive({
    });
    const tableData = ref([]);
    //查询全部
const selectAll = () => {
  selectExecutionLog({pageNum:queryInfo.pagenum,pageSize:queryInfo.pagesize}).then((res)=>{
    tableData.value = res.data
    out.value = res.data
  })
}
let factoryId = localStorage.getItem('factoryId')
    let factory=reactive({factorys:[],factoryNames:{}});
    const getFactorys = ()=>{
      getFactoryInfo({pageSize:1000}).then(res=>{
        let factorys = [];
        res.data?.list.forEach(e=>{
          factorys.push(e);
          factory.factoryNames[e.id]=e;
        })
        factory.factorys = factorys;
      })
    }
    //根据条件查询
    const selectQuery = () => {
      if(form.staStarTime== undefined  && form.staEndTime == undefined){
          selectExecutionLog(form).then((res)=>{
            tableData.value = res.data
          })
      }else if(form.staStarTime  && form.staEndTime == undefined){
          ElMessage.warning("请选择出入时间的开始时间及结束时间")
        } else if(form.staStarTime == undefined  && form.staEndTime){
          ElMessage.warning("请选择出入时间的开始时间及结束时间")
        }else if(form.staStarTime  && form.staEndTime){
          form.staStarTime = moment(form.staStarTime).format('YYYY-MM-DD')
          form.staEndTime = moment(form.staEndTime).format('YYYY-MM-DD')
            selectExecutionLog(form).then((res)=>{
              tableData.value = res.data
              out.value = res.data
            })
        }else{
            selectExecutionLog(form).then((res)=>{
            tableData.value = res.data
            })
        }
      // if(form.staStarTime== undefined  && form.staEndTime == undefined && form.typeOfAcces == undefined){
      //   form.pageSize = queryInfo.pagesize
      //   form.pageNum = queryInfo.pagenum
      //     selectExecutionLog(form).then((res)=>{
      //       tableData.value = res.data
      //       tableData.value.forEach(item => {
      //           item.typeOfAcces = ""
      //           // typeAcces =  item.typeOfAcces
      //       })
      //       // queryInfo.total=res.data.total;
      //       out.value = res.data
      //     })
      // }else if(form.staStarTime  && form.staEndTime == undefined && form.typeOfAcces == undefined){
      //   ElMessage.warning("请选择出入时间的开始时间及结束时间")
      // } else if(form.staStarTime == undefined  && form.staEndTime && form.typeOfAcces == undefined){
      //   ElMessage.warning("请选择出入时间的开始时间及结束时间")
      // }else if(form.staStarTime  && form.staEndTime && form.typeOfAcces == undefined){
      //   form.staStarTime = moment(form.staStarTime).format('YYYY-MM-DD')
      //   form.staEndTime = moment(form.staEndTime).format('YYYY-MM-DD')
      //     selectExecutionLog(form).then((res)=>{
      //       tableData.value = res.data
      //       tableData.value.forEach(item => {
      //           item.typeOfAcces = ""
      //           // typeAcces =  item.typeOfAcces
      //       })
      //       // queryInfo.total=res.data.total;
      //       out.value = res.data
      //     })
      // }else if(form.typeOfAcces && form.staStarTime== undefined  && form.staEndTime == undefined){
      //   form.pageSize = queryInfo.pagesize
      //   form.pageNum = queryInfo.pagenum
      //     selectExecutionLog(form).then((res)=>{
      //       tableData.value = res.data
      //     })
      // }else if(form.typeOfAcces && form.staStarTime && form.staEndTime){
      //   form.pageSize = queryInfo.pagesize
      //   form.pageNum = queryInfo.pagenum
      //   selectExecutionLog(form).then((res)=>{
      //     tableData.value = res.data
      //   })
      // }else if(form.typeOfAcces && form.staStarTime==undefined && form.staEndTime){
      //   ElMessage.warning("请选择出入时间的开始时间及结束时间")
      // }else if(form.typeOfAcces && form.staStarTime && form.staEndTime ==undefined){
      //   ElMessage.warning("请选择出入时间的开始时间及结束时间")
      // }
      // if(form.typeOfAcces == "" || form.typeOfAcces == undefined){
      //         console.log("没传")
      // form.pageSize = queryInfo.pagesize
      // form.pageNum = queryInfo.pagenum
      //   selectExecutionLog(form).then((res)=>{
      //     tableData.value = res.data
      //     tableData.value.forEach(item => {
      //         item.typeOfAcces = ""
      //         // typeAcces =  item.typeOfAcces
      //     })
      //     // queryInfo.total=res.data.total;
      //     out.value = res.data
      //   })
      // }else{
      //   console.log("传了")
      //   selectExecutionLog(form).then((res)=>{
      //     tableData.value = res.data
      //     // queryInfo.total=res.data.total;
      //   })
      // }
    }
    //重置
    const onReset = () => {
      form.staStarTime = ""
      form.staEndTime=""
      form.condition = ""
      form.typeOfAcces = ""
      form.factory_id = ""
      queryInfo.pagenum=1;
      queryInfo.pagesize = 10
      selectQuery()

    }
    //分页
    const queryInfo = reactive({
      pagenum:1,
      pagesize:10,
      total:0
    })
    const handleSizeChange = (val) => {
      queryInfo.pagesize = val
      selectQuery()
    }
    //点击第几页
    const handleCurrentChange = (val) => {
      queryInfo.pagenum = val
      selectQuery()
    }
    // 导出英文（数据库字段）
    // const exportExcel = ()=>{
    //   const data = XLSX.utils.json_to_sheet(tableData)//此处tableData.value为表格的数据
    //   const wb = XLSX.utils.book_new()
    //   XLSX.utils.book_append_sheet(wb,data,'test-data')//test-data为自定义的sheet表名
    //   XLSX.writeFile(wb,'车辆进出统计.xlsx')//test.xlsx为自定义的文件名
    // }
    //导出工序(中文)
    const out = ref()
    const exportExcel = () => {
      selectQuery()
      ElMessageBox.confirm("确定要导出吗?").then(()=>{
        selectQuery()
        let exportData = []
        //导出数据结构构造
        tableData.value.forEach(item => {
          item.factory_id = factory.factoryNames[item.factory_id]?.factory_name
          exportData.push({
            staTime: item.staTime ? item.staTime : '',
            factory_id: item.factory_id ? item.factory_id :'',
            typeOfAcces: item.typeOfAcces? item.typeOfAcces : '',
            staguo0: item.staguo0 ? item.staguo0 : '0',
            staBiguo0: item.staBiguo0 ? item.staBiguo0 : '0',
            staguo1: item.staguo1 ? item.staguo1 : '0',
            staBiguo1: item.staBiguo1 ? item.staBiguo1 : '0',
            staguo2: item.staguo2 ? item.staguo2 : '0',
            staBiguo2: item.staBiguo2 ? item.staBiguo2 : '0',
            staguo3: item.staguo3 ? item.staguo3 : '0',
            staBiguo3: item.staBiguo3 ? item.staBiguo3 : '0',
            staguo4: item.staguo4 ? item.staguo4 : '0',
            staBiguo4: item.staBiguo4 ? item.staBiguo4 : '0',
            staguo5: item.staguo5 ? item.staguo5 : '0',
            staBiguo5: item.staBiguo5 ? item.staBiguo5 : '0',
            staguo6: item.staguo6 ? item.staguo6 : '0',
            staBiguo6: item.staBiguo6 ? item.staBiguo6 : '0',
            staXin  : item.staXin   ? item.staXin   : '0',
            staBiXin: item.staBiXin ? item.staBiXin : '0',
            staAll: item.staAll ? item.staAll : '0',
            staBiAll: item.staBiAll ? item.staBiAll : '0',
          })
        })
        //导出表头设计
        let head = {
          staTime: '日期',
          factory_id:'工厂',
          typeOfAcces: '出入类型',
          staguo0: '国0数量',
          staBiguo0: '国0占比',
          staguo1: '国I数量',
          staBiguo1: '国I占比',
          staguo2:'国II数量',
          staBiguo2: '国II占比',
          staguo3:'国III数量',
          staBiguo3: '国III占比',
          staguo4:'国IV数量',
          staBiguo4: '国IV占比',
          staguo5:'国V数量',
          staBiguo5: '国V占比',
          staguo6:'国VI数量',
          staBiguo6: '国VI占比',
          staXin  :'新能源数量',
          staBiXin: '新能源占比',
          staAll:'合计数量',
          staBiAll: '合计占比',
        }
        //表头数据切换
        const list = exportData.map(item => {
          const obj = {}
          for (const k in item) {
            if (head[k]) {
              obj[head[k]] = item[k]
            }
          }
          return obj
        })
        // 创建工作表
        const data = XLSX.utils.json_to_sheet(list)
        // 创建工作簿
        const wb = XLSX.utils.book_new()
        // 将工作表放入工作簿中
        XLSX.utils.book_append_sheet(wb, data, 'data')
        // 生成文件并下载
        XLSX.writeFile(wb, '车辆进出统计.xlsx')
      })
    }
</script>
<style scoped>
    /* 面包屑字体颜色更改 */

    .breadcrumbColor>>>.el-breadcrumb__inner {
        color: #000;
    }
    /* 内部header */

    .inside-header {
        height: 20px;
        display: flex;
        justify-content: left;
        align-items: flex-start;
        background:#f2f4f5
    }
    /* 空心按钮样式 */

    .empty-but {
        border: 1px solid #3780b9;
        color: #3780b9;
    }
    /* 实心按钮背景样式 */

    .sele-but {
        background: #3780b9;
        border: 0px;
        border-radius: 2px;
        color: white;
    }

    .add-but {
        background: #dde5fe;
        color: #3780b9;
    }
    /* 分页 */

    .demo-pagination-block {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
</style>
